<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>状态监测首页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" href="css/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login/supersized.css">
    <link rel="stylesheet" href="css/login/login.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>

    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js" ></script>

    <style type="text/css">
        body
        {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: white;
            /*auto;background: url(img/jc.jpg) no-repeat center;*/
        }
        .widget-box {
            border-bottom: 0px;
        }
    </style>
</head>

<body style="margin-top: 70px;">
<div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
    <div id="main_box">
        <div id="status_bar" style="margin-left: 5%;height: 10%;">
            <div>
                <p style="float:left;font-size: large;font-family: '微软雅黑';" >在线：</p>
                <div style="float:left;background-color: rgba(218,206,150,1);height: 60%;width: 4%"></div>
            </div>
            <div>
                <p style="margin-left:  3%;float:left;font-size: large;font-family: '微软雅黑';" >离线：</p>
                <div style="float:left;background-color: rgba(194,194,194,1);height: 60%;width: 4%"></div>
            </div>
            <div>
                <p style="margin-left:  3%;float:left;font-size: large;font-family: '微软雅黑';" >运行：</p>
                <img src='/WhutMonitor/img/right.png' style="float:left;height: 60%;"/>
            </div>
            <div>
                <p style="margin-left:  3%;float:left;font-size: large;font-family: '微软雅黑';" >停止：</p>
                <img src='/WhutMonitor/img/wrong.png' style="float:left;height: 60%;"/>
            </div>

        </div>
        <div class="widget-header header-color-dark" style="border-top-left-radius:10px;border-top-right-radius:10px;">
            <h4 style="color:white;font-family: '微软雅黑'">机床状态监控查询</h4>
        </div>
        <div id="list_body" class="widget-body" style="border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
            <div id="machine_list_body" class="widget-main">
                <div id="machine_list" style="margin-left: 10%;margin-top: 2%;"></div>
            </div>
        </div>
    </div>
</div>


<script>
$(function () {
    // 变色特效
    var backgroundElement = window.top.cfgetTopBackgroundElement();
    $(backgroundElement).css("background","rgba(150,150,150,0.75)");

    $.ajax({													// 加载所有的传感器
        cache: false,
        url: 'equipment/getAllEquip',
        type: "POST",
        dataType: "json",
        success: function (result) {
            console.log(result);								// 将查询数据库的结果放到传感器类型组合框
            var cncNum = result.length;
            for (var i=0;i<cncNum;i++)
            {
                var machine_num = "machine_"+result[i].num;
                var machine_name = result[i].text;
                if(i==0){
                    $("#machine_list").append(
                        '<a href="<%=request.getContextPath()%>/mintor/newmenu/statemonitor.jsp" target="mainbody" ' +
                        ' id="' + machine_num + '" style="width: 120px;float:left;text-align: center;margin-top: 2%" ><img src="/WhutMonitor/img/cncmd_online.png" style="height: 15%;"/>' +
                        '<p>' + machine_name + '</p>' +
                        '<img src="/WhutMonitor/img/right.png" style="height: 5%;"/>' +
                        '</a>'
                    );
                }
                else{
                    $("#machine_list").append(
                        '<div id="' + machine_num + '" style="width: 120px;float:left;text-align: center;margin-top: 2%;margin-left: 5%" ><img src="/WhutMonitor/img/cncmd_online.png" style="height: 15%;"/>' +
                        '<p>' + machine_name + '</p>' +
                        '<img src="/WhutMonitor/img/wrong.png" style="height: 5%;"/>' +
                        '</div>'
                    );
                }
            }
            for(var i=0;i<4;i++)
            {
                var machine_num = "machine1_00" + (i+1);
                var machine_name = "华中数控EK-X00" + (i+1);
                $("#machine_list").append(
                    '<div id="' + machine_num + '" style="width: 120px;float:left;text-align: center;margin-top: 2%;margin-left: 5%" ><img src="/WhutMonitor/img/cncmd_off.png" style="height: 15%;"/>' +
                    '<p>' + machine_name + '</p>' +
                    '<img src="/WhutMonitor/img/wrong.png" style="height: 5%;"/>' +
                    '</div>'
                );
            }
            for(var i=0;i<6;i++)
            {
                var machine_num = "machine2_00" + (i+1);
                var machine_name = "西门子840D-K00" + (i+1);
                if(i==0){
                    $("#machine_list").append(
                        '<div id="' + machine_num + '" style="clear:both;width: 120px;float:left;text-align: center;margin-top: 2%;" ><img src="/WhutMonitor/img/cncmd_off.png" style="height: 15%;"/>' +
                        '<p>' + machine_name + '</p>' +
                        '<img src="/WhutMonitor/img/wrong.png" style="height: 5%;"/>' +
                        '</div>'
                    );
                }
                else{
                    $("#machine_list").append(
                        '<div id="' + machine_num + '" style="width: 120px;float:left;text-align: center;margin-top: 2%;margin-left: 5%" ><img src="/WhutMonitor/img/cncmd_off.png" style="height: 15%;"/>' +
                        '<p>' + machine_name + '</p>' +
                        '<img src="/WhutMonitor/img/wrong.png" style="height: 5%;"/>' +
                        '</div>'
                    );
                }
            }
            var hei=$("#machine_001").height()+ $("#machine2_001").height() + 120;
            $("#list_body").height(hei);
        }
    });
});
</script>
</body>
</html>
